<template>
  <div class="orgList">
    <div class="table">
      <el-table :height="'calc(100% - 0px)'" :header-cell-style="{background:'#F8F9FA'}" :data="tableData">
        <el-table-column
            prop=""
            width="120"
            label="">
        </el-table-column>
        <el-table-column prop="orgName" label="名称"> </el-table-column>
        <el-table-column label="描述" prop="description"> </el-table-column>
<!--        <el-table-column label="操作" prop="caozuo">-->
<!--          <template slot-scope="scope">-->
<!--            &lt;!&ndash;            <el-button type="primary" size="small" @click="goSee(scope.row)">查看</el-button>&ndash;&gt;-->
<!--            <el-button type="primary" size="small" @click="goEdit(scope.row)"-->
<!--              >编辑</el-button-->
<!--            >-->
<!--            <el-button type="danger" size="small" @click="goDelete(scope.row)"-->
<!--              >删除</el-button-->
<!--            >-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      width="500px"
    >
      <orgForm ref="orgForm"></orgForm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOrg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchForm from "../../../../components/searchForm";
import orgForm from "./orgForm";

export default {
  name: "orgList",
  components: {
    searchForm,
    orgForm,
  },
  data() {
    return {
      tableData: [],
      parentNode: {},
      dialogVisible: false,
    };
  },
  methods: {
    goSee(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.orgForm.type = "see";
        this.$refs.orgForm.form.description = row.description;
        this.$refs.orgForm.form.orderby = row.orderby;
        this.$refs.orgForm.form.orgName = row.orgName;
        this.$refs.orgForm.form.parentId = this.parentNode.id;
        this.$refs.orgForm.form.id = row.id;
        this.$refs.orgForm.form.parentName = this.parentNode.orgName;
      });
    },
    goEdit(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.orgForm.type = "edit";
        this.$refs.orgForm.form.description = row.description;
        this.$refs.orgForm.form.orderby = row.orderby;
        this.$refs.orgForm.form.orgName = row.orgName;
        this.$refs.orgForm.form.parentId = this.parentNode.id;
        this.$refs.orgForm.form.id = row.id;
        this.$refs.orgForm.form.parentName = this.parentNode.orgName;
      });
    },
    editOrg() {
      this.$refs.orgForm.validate().then((res) => {
        if (this.$refs.orgForm.type == "see") {
          this.dialogVisible = false;
          return;
        }
        let params = {
          description: this.$refs.orgForm.form.description,
          id: this.$refs.orgForm.form.id,
          orderby: this.$refs.orgForm.form.orderby,
          orgName: this.$refs.orgForm.form.orgName,
          parentId: this.$refs.orgForm.form.parentId,
        };
        this.$api.editOrg(params).then((res) => {
          this.$message.success("编辑成功");
          this.tableData.forEach((x) => {
            if (x.id == res.data.id) {
              x.description = res.data.description;
              x.orgName = res.data.orgName;
            }
          });
          this.dialogVisible = false;
        });
      });
    },
    goDelete(row) {
      this.$confirm("此操作将删除该组织, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let params = { id: row.id };
          this.$api.delOrg(params).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.tableData = this.tableData.filter((x) => {
              return x !== row;
            });
            this.$emit("handlerDelete", row);
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="less">
.orgList {
  width: calc(100% - 150px);
  flex: 1;
  height: 100%;

  .table {
    padding: 10px;
    width: calc(100% - 22px);
    height: calc(100% - 20px);
  }
}
</style>